DiscGolf.Views['accordion'] = Backbone.View.extend( {

    contentInsertionSuccess: 0,

    events: {

        'click .accordionHeader': 'handleHeaderClick',
        'click .accordionContentClose': 'handleCloseContentClick'
    
    },

    initialize: function() {

        this.render();

        this.trigger( 'contentRendered' );
    },

    render: function() {

        _.each( this.options.content, this.renderContent, this );

        this.closeButton =
            this.makeEl( 'div' ).css( { 'position': 'absolute',
                                        'display': 'none',
                                        'font-size': '.25em',
                                        'color': 'white' } )
                                .attr( { 'class': 'accordionContentClose cursorHand' } )
                                .text('x')
                                .appendTo( this.$el );
        
        return this;
    },

    renderContent: function( element, index, list ) {

        var header =
            this.makeEl( 'div' ).attr( { 'class': 'accordionHeader cursorHand' } )
                                .css( { 'text-align': 'center' } )
                                .text( element.header );

        var content = 
            this.makeEl( 'div' ).attr( { 'class': 'accordionContent' } )
                                .append( element.view.$el );

        element.view.listenTo( this, 'contentRendered', element.view.postDomInsertion );

        this.listenTo( element.view, 'postInsertionComplete', this.contentPostInsertionSuccess );

        this.$el.append( this.makeEl( 'div' ).append( header, content ) );
    },

    contentPostInsertionSuccess: function() {

        this.contentInsertionSuccess++;

        if( this.contentInsertionSuccess == this.options.content.length ) {
            
            this.$el.find( '.accordionContent' ).hide();
        }
    },

    handleHeaderClick: function( e ) {

        this.currentHeader = $( e.target ).removeClass( 'accordionHeader' );

        _.each( this.$el.find( '.accordionHeader' ), this.hideHeader, this );

        this.currentContent = this.currentHeader.next();

        this.currentContent.show( 'blind', 1500, $.proxy( this.displayCloseButton, this ) );
    },

    hideHeader: function( element, index, list ) {

        $( element ).hide( 1000 );
    },
    
    showHeader: function( element, index, list ) {

        $( element ).show( 1000 );
    },

    displayCloseButton: function() {

        this.closeButton.show();

        this.closeButton.css( {
            top: this.currentHeader.offset().top + ( ( this.currentHeader.outerHeight( true ) - this.closeButton.outerHeight( true ) ) / 2 ), 
            left: this.currentHeader.offset().left + this.currentContent.outerWidth( true ) - this.closeButton.outerWidth( true ) - 5 } );
    },

    handleCloseContentClick: function() {

        this.closeButton.hide();

        this.currentContent.hide( 'blind', 1500, $.proxy( this.afterContentHidden, this ) );

    },

    afterContentHidden: function() {

        _.each( this.$el.find( '.accordionHeader' ), this.showHeader, this );

        this.currentHeader.addClass( 'accordionHeader' );
    }

} );
